/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="search-body">
		<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
		<view class="search-head">
			<view class="back" @click="back()">
				<uni-icon type="arrowleft" size="30" color="#999999"></uni-icon>
			</view>
			<view class="search-bar">
				<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
				<uni-icon type="search" size="20" color="#DBDBDB" style='margin: 10upx 20upx;'></uni-icon>
				<input placeholder="酒店名/地名/关键词" v-model="searchText" style="margin-top: 6upx;" type="text">
				<!-- #endif -->
				<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
				<uni-icon type="search" size="20" color="#DBDBDB" style='margin: 0 20upx;'></uni-icon>
				<input placeholder="酒店名/地名/关键词" v-model="searchText" type="text">
				<!-- #endif -->
			</view>
			<view class='search-btn'>搜索</view>
		</view>
		<view class="search-list" v-for="(item,index) in searchData" :key='index'>
			<view class="list-title">
				<image class="list-icom" :src="item.img" mode=""></image>
				<text class="title-text">{{item.title}}</text>
				<uni-icon v-if="index==0" class="operation-icon" type="delete" size="20" color="#999999"></uni-icon>
				<image v-if="index==0" class="operation-img" src="/static/hotel/delete.png" mode=""></image>
				<uni-icon v-if="index>0" :class="item.isOpen?'operation-icon-ac':'operation-icon'"  @click="item.isOpen=!item.isOpen" type="arrowleft" size="20" color="#999999"></uni-icon>
				<text v-if="index==0" class="operation">清空</text>
				<text v-if="index>0&&!item.isOpen" class="operation" @click="item.isOpen=!item.isOpen">展开</text>
				<text v-if="index>0&&item.isOpen" class="operation" @click="item.isOpen=!item.isOpen">收起</text>
			</view>
			<view  :class="item.isOpen?'list-area-ac':'list-area'">
				<view :class="index<2?'search-item':'search-item-2'"  v-for="(searchItem,innerIndex) in item.data" :key='innerIndex' @click="chooseSearch(searchItem)">{{searchItem}}</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
				searchText:'',
				searchData:[
					{   
						img:'/static/hotel/history-s.png',
						title:'历史搜索',
						data:[
							'沈阳站'
						],
						isOpen:true
					},
					{   
						img:'/static/hotel/djdzs.png',
						title:'大家都在搜',
						data:[
							'沈阳站','沈阳北站','青年大街','太原街','中街'
						],
						isOpen:false
					},
					{   
						img:'/static/hotel/rmpp.png',
						title:'热门品牌',
						data:[
							'如家快捷酒店','汉庭酒店','7天酒店','全季酒店','速8酒店','锦江之星酒店',
							'如家快捷酒店','汉庭酒店','7天酒店','全季酒店','速8酒店','锦江之星酒店'
						],
						isOpen:false
					},
					{   
						img:'/static/hotel/ztlx.png',
						title:'主题类型',
						data:[
							'快捷连锁','亲子家庭','情侣约会','温泉酒店','主题特色','四合院',
							'快捷连锁','亲子家庭','情侣约会','温泉酒店','主题特色','四合院'
						],
						isOpen:false
					},
					{   
						img:'/static/hotel/syq.png',
						title:'商业区',
						data:[
							'中关村、五道口','前门、崇文门商贸区','辽宁大学南校区','南湖公园',
							'中关村、五道口','前门、崇文门商贸区','辽宁大学南校区','南湖公园',
						],
						isOpen:false
					},
					{   
						img:'/static/hotel/dtzd.png',
						title:'地铁站点',
						data:[
							'云峰北街','太原街','营盘街','建筑大学','航天航空大学','天成街',
							'云峰北街','太原街','营盘街','建筑大学','航天航空大学','天成街',
						],
						isOpen:false
					},
					{   
						img:'/static/hotel/rmjq.png',
						title:'热门景点',
						data:[
							'绿岛森林公园','沈阳奥林匹克中心','方特欢乐世界','科学宫','慈恩寺',
							'绿岛森林公园','沈阳奥林匹克中心','方特欢乐世界','科学宫','慈恩寺',
						],
						isOpen:false
					}
				]
			}
		},
		methods: {
			chooseSearch(str){
				this.searchText = str
				this.$store.commit('hotelSearchTextUpdate',this.searchText)
				this.back()
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		created(){
			
		},
		components: {
			uniIcon
		},
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.search-body{
		width: 100%;
		height: 100vh;
	}
	.search-head{
		width: 750upx;
		height: 60upx;
		display: flex;
		margin-top: 20upx;
		flex-direction: row;
		
	}
	.back{
		width: 60upx;
		height: 60upx;
		margin-left: 20upx;
		
	}
	.back uni-icon{
		width: 30upx;
		height: 30upx;
	}
	.search-bar{
		width: 500upx;
		border-radius: 30upx;
		height: 60upx;
		border: #BBBBBB solid 1upx;
		margin-left: 20upx;
		
		margin-right: 20upx;
		display: flex;
		flex-direction: row;
	}
	.search-bar input{
		width: 340upx;
		height: 40upx;
		display: block;
		margin-top: 10upx;
		font-size: 28upx;
		line-height: 40upx;
	}
	.search-btn{
		width: 130upx;
		height: 60upx;
		border-radius: 28upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		color: #FFFFFF;
		text-align: center;
		line-height: 60upx;
		font-size: 28upx;
		
		margin-right: 20upx;
	}
	.search-list{
		width: 750upx;
		margin-top: 30upx;
		height: auto;
	}
	.list-title{
		width: 700upx;
		margin-left: 25upx;
		height: 40upx;
		
	}
	.list-icom{
		width: 40upx;
		height: 40upx;
		float: left;
	}
	.title-text{
		height: 40upx;
		font-size: 26upx;
		margin-left: 20upx;
		line-height: 40upx;
		float: left;
	}
	.operation{
		font-size: 24upx;
		color: ;
		line-height: 40upx;
		float: right;
	}
	.operation-icon{
		transform: rotate(270deg);
		float: right;
	}
	.operation-icon-ac{
		transform: rotate(90deg);
		float: right;
	}
	.operation-img{
		width: 20px;
		height: 20px;
		float: right;
	}
	.list-area{
		width: 650upx;
		margin-top: 20upx;
		margin-left: 50upx;
		height: 120upx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.list-area-ac{
		width: 650upx;
		margin-top: 20upx;
		margin-left: 50upx;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.search-item{
		padding: 4upx 24upx;
		margin: 10upx 20upx;
		background: rgba(248,246,247,1.00);
		border-radius: 20upx;
		font-size: 24upx;
	}
	.search-item-2{
		padding: 4upx 24upx;
		margin: 10upx 20upx;
		background: rgba(247,247,247,1.00);
		border-radius: 20upx;
		font-size: 24upx;
	}
</style>
